<h2> The portal host is here: </h2>
<div class="demo-portal-host">
  <template [portalHost]="selectedPortal"></template>
</div>

<button type="button" (click)="selectedPortal = programmingJoke">
  Programming joke
</button>

<button type="button" (click)="selectedPortal = mathJoke">
  Math joke
</button>

<button type="button" (click)="selectedPortal = scienceJoke">
  Science joke
</button>

<!-- Template vars on <template> elements can't be accessed _in_ the template because Angular
    doesn't support grabbing the instance / TemplateRef this way because the variable may be
    referring to something *in* the template (such as #item in ngFor). As such, the component
    has to use @ViewChild / @ViewChildren to get these references.
    See https://github.com/angular/angular/issues/7158 -->
<template portal>
  <p> - Why don't jokes work in octal?</p>
  <p> - Because 7 10 11.</p>
</template>

<div *portal>
 <p> - Did you hear about this year's Fibonacci Conference? </p>
 <p> - It's going to be as the last two put together. </p>
</div>
